<template>
  <div class="order_detail" style="overflow: auto;height: 100vh;">

    <van-nav-bar title="订单详情" left-text="" right-text="" left-arrow @click-left="onClickLeft"
      style="background-color: #fff;">
      <template #left>
        <van-icon name="arrow-left" size="19" color="#000" />
      </template>

      <!-- <template #right>
        <van-icon name="ellipsis" size="22" color="#000" />
      </template> -->
    </van-nav-bar>

    <div class="user-order" style="text-align: center">
      <div
        style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #CB0000;height: 60px;line-height: 60px;">
        支付剩余时间 {{countdown }}</div>
    </div>

    <div class="user-order2">
      <div style="display: flex;padding-top: 12px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;margin-left: 17px;width: 100px;">
          订单信息</div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #CB0000;position: absolute;float: right;right: 30px;">
          待支付
        </div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;width: 115px;">
          订单编号</div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 30px;">
          {{ orderInfo.order_sn }}</div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 113px;">
          创建时间</div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 30px;">
          {{ orderInfo.create_time_text }}</div>
      </div>
    </div>


    <div class="user-order3">
      <div style="display: flex;padding-top: 16px">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #333333;margin-left: 23px;">
          商品信息
        </div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #666;position: absolute;float: right;right: 20px;">
          平台服务费￥{{ orderInfo.fee }}
        </div>
      </div>

      <div style="display: flex;padding-top: 20px;">
        <img :src="orderInfo.goods.image" alt="" srcset=""
          style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
        <div
          style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
          {{ orderInfo.goods.name }}</div>

        <div style="padding-top: 70px;display: flex">
          <div
            style="float: right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;position: absolute">
            x1
          </div>
          <div
            style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
            ￥ {{ orderInfo.goods.price }}
          </div>

        </div>
      </div>





    </div>


    <div class="user-order4">
      <div style="display: flex;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;padding-top: 10px;margin-left: 17px;width: 310px;">
          购买信息</div>

      </div>
      <div style="display: flex;padding-top: 19px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 115px;">
          商品金额</div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          {{ orderInfo.goods_money }}</div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;">
          平台服务费 </div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          {{ orderInfo.fee }}</div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;">
          储值账户 </div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          {{ orderInfo.money }}</div>
      </div>

      <div style="display: flex;padding-top: 19px;">

        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          合计：{{ orderInfo.total }}</div>
      </div>
    </div>

    <!-- <div class="order-detail">
      <div>订单编号: {{ orderInfo.orderSn }}</div>
      <div>订单状态: {{ orderInfo.orderStatusText }}</div>
      <div>下单时间: {{ orderInfo.createTime }}</div>
      <div>支付方式: {{ orderInfo.payTypeText }}</div>
      <div>支付时间: {{ orderInfo.payTime }}</div>
      <div>运    费: {{ orderInfo.freightPrice | yuan }}</div>
      <div>订单金额: {{ orderInfo.orderPrice | yuan }}</div>
      <div>实付金额: {{ orderInfo.actualPrice | yuan }}</div>
      <div>退款金额: {{ orderInfo.refundAmount | yuan }}</div>
      <div>收货地址: {{ orderInfo.address }}</div>
      <div>用户留言: {{ orderInfo.message }}</div>
      <van-card
        v-for="(goods, goodsIndex) in orderInfo.orderGoodsVOList"
        :key="goodsIndex"
        :title="goods.goodsName"
        :num="goods.number"
        :price="goods.price | yuan"
        :thumb="goods.picUrl"
      >
        <div slot="desc">
          <div class="desc">
            <van-tag
              v-for="(spec, idx) in goods.specifications"
              :key="idx"
              plain
              style="margin-right: 6px"
            >{{ spec }}</van-tag>
          </div>
        </div>
      </van-card>
    </div> -->


    <div style=" position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
  background-color: #fff;
  color: #fff;z-index: 999;">
      <div style="display: flex;margin-top: 10px;">
        <div style="font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #151515;margin-left: 30px;">合计：</div>
        <div style="font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 17px;
color: #2E512E;">
          ￥{{ orderInfo.total }}
        </div>
        <div style="position: absolute;float: right;right: 10px;">


          <van-button
            style="width: 93px;height: 30px;border-radius: 100px;border: 1px solid #CCCCCC;text-align: center;font-size: 14px;margin-right: 10px;">取消支付</van-button>
          <van-button
            style="width: 93px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;"
            @click="toOrderpay">立即支付</van-button>
        </div>
      </div>

      <div style="font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #666666;margin-left: 30px;">
        共1件商品
      </div>
    </div>
  </div>
</template>
<script>
import { orderDetail, orderPrepay } from '@/api/user'

export default {
  props: {
    orderSn: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orderInfo: {},
      loading: true,
      timer: null,
      countdownTime: 10 * 60 * 1000, // 10分钟
    }
  },
  created() {
    this.startCountdown();
  },
  beforeDestroy() {
    this.clearCountdown();
  },
  mounted() {
    this.orderInfo = this.$route.query.orderInfo
  },
  computed: {
    countdown() {
      const minutes = Math.floor(this.countdownTime / 60 / 1000);
      const seconds = Math.floor((this.countdownTime % 60000) / 1000);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        this.countdownTime -= 1000;
        if (this.countdownTime <= 0) {
          this.clearCountdown();
        }
      }, 1000);
    },
    clearCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    toOrderDetail() {
      this.$router.push({
        path: "/order/pay"
      })
    },
    toOrderpay() {
      let obj = {
        ids: this.orderInfo.id
      }
      orderPrepay(obj).then((res) => {
        this.$router.replace({
          path: "/order/paySuccess"
        })
      })

    },
    onClickLeft() {
      this.$router.back()
    },
    orderDetail() {
      orderDetail(this.orderSn)
        .then((res) => {
          this.orderInfo = res.data.data
        })
        .finally((res) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-order {
  width: 702px;
  height: 100px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order2 {
  width: 702px;
  height: 220px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order3 {
  width: 702px;
  height: 300px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order4 {
  width: 702px;
  height: 350px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}
</style>
